import {
  View,
  ScrollView,
  Text,
  Input,
  Button,
  Flex,
  Spacer,
  Center,
} from 'native-base';
import {flexbox} from 'native-base/lib/typescript/theme/styled-system';
import React, {Component, useCallback} from 'react';
import {
  StyleSheet,
  ToastAndroid,
  FlatList,
  TouchableOpacity,
  Keyboard,
  Image,
} from 'react-native';
import DeviceInfo from 'react-native-device-info'; //引入获取用户设备信息的对象
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ScaledImage from '../../commponents/printing/ScaledImage';
import ZoomPictureModel from '../../commponents/printing/ZoomPictureModel';
class UpDownPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      library: null,
      imgs: [],
      searchImgs: [], //用户搜索的图片内容
      person: null,
      showSwarchInput: true, //是否展示搜索的表单
      fromPage: null, //搜索的起始页
      toPage: null, //搜索的尾页
      search: false, //当前是否处于搜索页码的状态
      isShowImage: false,
      imgsWithIndex: [], //把所有图片加上下标
      imgsInpage: [], //展示到页面上的图片
    };
  }

  componentDidMount() {
    let params = this.props.navigation.getState().routes[2].params;
    this.setState({
      library: params.library,
      imgs: params.imgs,
      person: params.person,
    });
  }

  searchFunc() {
    //获取输入的页数
    let from = this.state.fromPage;
    let to = this.state.toPage;
    console.log(from, to);
    if (from && to) {
      //判断范围是否超出总页数
      if (Number(to) > this.state.imgs.length) {
        ToastAndroid.show(`超出页码`, ToastAndroid.SHORT);
      } else if (Number(from) < 0 || Number(to) < 0) {
        ToastAndroid.show(`请输入合法数字`, ToastAndroid.SHORT);
      } else if (Number(to) < Number(from)) {
        ToastAndroid.show(`请注意起始页`, ToastAndroid.SHORT);
      } else {
        let ans = [];
        for (let i = from - 1; i < to; i++) {
          ans.push(this.state.imgs[i]);
        }
        this.setState({
          searchImgs: ans,
          search: true,
        });
      }
      Keyboard.dismiss();
    }
  }

  renderImg(item, index) {
    return (
      <View style={{marginBottom: 20}}>
        <ScaledImage
          // uri={item?.url}
          uri={`https:${item.url.split(':')[1]}`}
          handleZoomPicture={this.handleZoomPicture}
          // width={styles.detailImg.width}
        />
        <Text style={{textAlign: 'center'}}>
          {this.state.search ? Number(this.state.fromPage) + index : index + 1}
        </Text>
      </View>
    ); /*  */
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          removeClippedSubviews
          keyboardShouldPersistTaps={'handled'}
          keyboardDismissMode="on-drag"
          ListHeaderComponent={
            <View style={{backgroundColor: '#EDEDED'}}>
              <Flex
                direction="row"
                style={{
                  padding: 20,
                  paddingBottom: 3,
                }}>
                <Text style={{fontSize: 18, marginRight: 10}}>
                  {this.state.library}
                </Text>
                <Text style={{color: '#767676'}}>{this.state.person}</Text>
              </Flex>
              <TouchableOpacity activeOpacity={1}>
                <Text
                  style={{
                    paddingTop: 10,
                    padding: 20,
                    fontSize: 13,
                  }}>
                  所有印谱、印蜕、字典、古印原印资源已支持简繁体通检，点击
                  <Text
                    onPress={() => {
                      this.props.navigation.navigate('SealCuttings');
                    }}>
                    {' '}
                    此处
                    <MaterialCommunityIcons
                      name="teddy-bear"
                      color={'#C6AB76'}
                    />{' '}
                  </Text>
                  立即检索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  {!this.state.showSwarchInput && (
                    <Text
                      style={{
                        backgroundColor: '#F3F3F3',
                        padding: 3,
                        color: '#54A4F3',
                      }}
                      onPress={() => {
                        this.setState({showSwarchInput: true});
                      }}>
                      展开搜索
                      <MaterialCommunityIcons
                        name="chevron-down"
                        color={'#54A4F3'}
                      />
                    </Text>
                  )}
                </Text>
              </TouchableOpacity>
              <View>
                {this.state.showSwarchInput && (
                  <>
                    <Flex
                      direction="row"
                      style={{padding: 20, paddingTop: 0, paddingBottom: 0}}>
                      <Input
                        placeholder="起始页"
                        variant="unstyled"
                        size="md"
                        bg="white"
                        borderRadius={5}
                        borderColor="#A8A8A8"
                        value={this.state.fromPage}
                        onChangeText={value => {
                          this.setState({fromPage: value});
                        }}></Input>
                      <Center>&nbsp;&nbsp;-&nbsp;&nbsp;</Center>
                      <Input
                        placeholder="结束页"
                        variant="unstyled"
                        size="md"
                        bg="white"
                        borderRadius={5}
                        borderColor="#A8A8A8"
                        value={this.state.toPage}
                        onChangeText={value => {
                          this.setState({toPage: value});
                        }}></Input>
                      <Spacer></Spacer>
                      <Button
                        bg="#F2F2F2"
                        _text={{color: '#37BC76'}}
                        colorScheme="rgb(217,217,217)"
                        onPress={() => {
                          this.searchFunc();
                        }}>
                        搜索
                      </Button>
                      <Spacer></Spacer>
                      <Button
                        bg="#F2F2F2"
                        _text={{color: '#37BC76'}}
                        colorScheme="rgb(217,217,217)"
                        onPress={() => {
                          this.setState({
                            search: false,
                            searchImgs: [],
                            fromPage: null,
                            toPage: null,
                          });
                        }}>
                        重置
                      </Button>
                    </Flex>
                    <Flex
                      direction="row"
                      justifyContent={'center'}
                      style={{padding: 20}}>
                      <Text style={{color: '#787990'}}>
                        (总计{this.state.imgs.length}页，请在此范围内搜索)
                      </Text>
                      <Text
                        style={{
                          backgroundColor: '#F3F3F3',
                          padding: 3,
                          color: '#54A4F3',
                          marginLeft: 5,
                        }}
                        onPress={() => {
                          this.setState({showSwarchInput: false});
                        }}>
                        收起搜索
                      </Text>
                    </Flex>
                  </>
                )}
              </View>
            </View>
          }
          stickyHeaderIndices={[0]}
          data={this.state.search ? this.state.searchImgs : this.state.imgs}
          renderItem={({item, index}) => this.renderImg(item, index)}
          onEndReached={({item, index}) => this.renderImg(item, index)}
          onEndReachedThreshold={0.8}
          keyExtractor={(item, index) => item.url}
          style={{
            backgroundColor: '#EDEDED',
            padding: 20,
            paddingTop: 0,
          }}
        />
      </View>
    );
  }
}
export default UpDownPage;

const styles = StyleSheet.create({
  inputStyle: {
    backgroundColor: 'white',
    borderRadius: 6,
  },
  container: {
    height: '100%',
  },
  imgContainer: {
    flex: 1,
  },
});
